<template>
  <div :style="{ '--height': height, '--width': width }" class="upload-multiple-container">
    <el-upload
      :action="file_upload_url"
      :show-file-list="false"
      :on-success="onSuccessUpload"
      :before-upload="beforeUpload"
      :disabled="disabled"
      list-type="picture-card"
    >
      <img v-if="sync_value" :src="imgUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

<script>
import propsync from '@/mixins/propsync'
export default {
  name: 'UploadSingle',
  mixins: [propsync],
  props: {
    fileTypes: {
      type: Array,
      default: () => []// 如['image/jpg','image/*']
    },
    fileSize: {
      type: Number,
      default: 0
    },
    value: {
      type: String,
      default: '',
      isSync: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: '50px'
    },
    width: {
      type: String,
      default: '50px'
    }
  },
  data() {
    return {
      file_upload_url: process.env.VUE_APP_BASE_API + '/upload',
      fileList: [],
      isShowPdf: false,
      pdfIconUrl: ''
    }
  },
  computed: {
    imgUrl() {
      if (this.sync_value) {
        return process.env.VUE_APP_FILE_URL + '/' + this.sync_value
      } else {
        return ''
      }
    }
  },
  methods: {
    onSuccessUpload(response, file, fileList) {
      if (response.success) {
        // debugger
        // this.$emit('uploaded', file)
        this.sync_value = response.result
      } else {
        this.$message.error(response.msg)
      }
    },
    beforeUpload(file) {
      this.error = ''
      const ext = file.name.substr(file.name.indexOf('.')).toLowerCase()
      const filesize = file.size / 1024 / 1024 // 转换为M
      if (this.fileTypes.length > 0) {
        if (!this.fileTypes.includes(ext)) {
          // this.$message.error('格式有误，请重新选择！')
          // this.error = '格式有误，请重新选择！'
          this.showError('格式有误，请重新选择！')
          return false
        }
      }

      if (this.fileSize > 0 && filesize > this.fileSize) {
        // this.$message.error('文件大小超过' + this.fileSize + 'M')
        // this.error = '文件大小超过' + this.fileSize + 'M'
        this.showError('文件大小超过' + this.fileSize + 'M')
        return false
      }
      return true
    },
    showError(error) {
      this.$message.error(error)
    }
  }
}
</script>

<style scoped lang="scss">
  .upload-multiple-container{
    ::v-deep .el-icon-close-tip{
      display: none;
    }
    ::v-deep .el-upload-list__item-status-label{
      display: none;
    }
  }

  ::v-deep .el-upload--picture-card{
    width: var(--width) !important;
    height: var(--height) !important;
    line-height: var(--height) !important;
    overflow: hidden;
  }
  ::v-deep .avatar-uploader-icon {
    font-size: 20px;
    color: #8c939d;
    width: var(--width);
    height: var(--height);
    line-height: var(--height);
    text-align: center;
  }

  .avatar{
    width: var(--width);
    height: var(--height);
    img{
      width: var(--width);
      height: var(--height);
    }
  }
</style>
